<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/reset.css">
        <title>纯css掷骰子</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
            }
            .dice {
                width: 366px;
                height: 366px;
                background: url("../image/random-dice.webp");
                animation: random-dice steps(5) 3s infinite;
            }
            @keyframes random-dice {
                from {
                    background-position-x: 0;
                }
                to {
                    background-position-x: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="dice"></div>
    </body>
</html>
